<template>
  <div class="system-edit-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-input size="small"  v-model="userName" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
        <el-button size="small" @click="searchUserName" type="primary" class="ml10" icon="el-icon-search">查询</el-button>
        <el-button size="small"  type="success" icon="el-icon-folder-add" class="ml10" @click="addAndUpdateShow(null)"><el-icon></el-icon>新增用户</el-button>
      </div>
      <el-table :data="userList" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="role" label="关联角色" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deptName" label="部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phonenumber" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="用户状态" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 0">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button  size="small" type="text" @click="addAndUpdateShow(scope.row,scope.row.status)" >修改</el-button>
            <el-button :disabled="scope.row.userName === 'admin'" size="small" type="text" @click="deleteUser(scope.row.userId)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="mt15"
          :page-sizes="[3, 6, 9]"
          :current-page="currentPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增用户   -->
    <el-dialog :before-close="DialogClose" :title="title"  :visible.sync="isShowDialog" width="769px">
      <el-form  size="mini" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="账户名称">
              <el-input v-model="user.userName" placeholder="请输入账户名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="用户昵称">
              <el-input v-model="user.nickName" placeholder="请输入用户昵称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="账户密码">
              <el-input v-model="user.password" placeholder="请输入" type="password" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="关联角色">
              <el-select v-model="user.roles" multiple  placeholder="请选择" clearable class="w100">
                <el-option v-for="role in roles" :label="role.roleName" :value="role.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="手机号">
                <el-input v-model="user.phonenumber" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="邮箱">
              <el-input v-model="user.email" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="性别">
              <el-select v-model="user.sex" placeholder="请选择" clearable class="w100">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="关联部门">
              <el-select v-model="user.deptId"  placeholder="请选择" clearable class="w100">
                <el-option v-for="dept in deptList" :label="dept.dpName" :value="dept.dpId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="用户状态">
              <el-switch v-model="user.status" active-value="0"  inactive-value="1" inline-prompt active-text="启" inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
            <el-form-item label="用户描述">
              <el-input v-model="user.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button  size="mini" @click="isShowDialog = false,user = {}">取 消</el-button>
					<el-button type="primary" @click="addAndUpdateUser(null,0)" size="mini">确 定</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { findPageUser,addUser,updateUser,deleteUser } from '@/api/user'
import role from '@/api/role'
import dept from '@/api/dept'

export default {
  name: 'systemUser',
  data() {
    return {
      userList: [], //用户集合
      userName: "", // 分页条件
      pageCount: 0, //总页数
      currentPage: 1, //当前页数
      limit: 3, // 页大小
      total: 0, //总页数
      isShowDialog: false,  //新增用户，对话框是否显示
      user: {},  // 新增用户表单信息
      roles: [],  // 下拉框显示角色
      deptList: [],  // 下拉框显示部门
      title: "",  //对话框的title
    };
  },
  created() {
    this.getRoles()
    this.getDeptList()
    this.getUserList(this.userName, this.currentPage, this.limit);
  },
  methods: {
    addAndUpdateShow(user) {
      this.isShowDialog = true
      if (user == null){
        this.title = "新增用户"
      } else{
        this.title = "修改用户"
        let stringify= JSON.stringify(user); //转成字符串
        this.user =JSON.parse(stringify);//转回去
      }
    },
    // 分页查询所有用户信息
    getUserList(userName, page, limit) {
      findPageUser(userName, page, limit).then(resp => {
        this.userList = resp.data.records
        this.pageCount = resp.data.total
        this.currentPage = resp.data.current
        this.total = resp.data.total
      })
    },
    // 页大小改变触发
    onHandleSizeChange(val) {
      this.limit = val
      this.getUserList(this.userName, this.currentPage, this.limit)
    },
    // 当前页改变触发
    onHandleCurrentChange(val) {
      this.currentPage = val
      this.getUserList(this.userName, this.currentPage, this.limit)
    },
    // 搜索查询
    searchUserName() {
      this.getUserList(this.userName, this.currentPage, this.limit);
    },
    // 新增用户信息 和修改用户
    addAndUpdateUser() {
      if (this.title == "新增用户") {
        addUser(this.user).then(resp => {
          this.searchUserName()
          this.isShowDialog = false
          this.user = {}
          this.$message({message: resp.message, type: 'success'});
        })
      } else {
        updateUser(this.user).then(resp => {
          this.searchUserName()
          this.isShowDialog = false
          this.user = {}
          this.$message({message: resp.message, type: 'success'});
        })
      }
    },
    // 查询所有角色信息
    getRoles() {
      role.getRoles().then(resp => {
        this.roles = resp.data;
      })
    },
    // 删除用户信息
    deleteUser(userId){
      this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(userId).then(resp => {
          this.getUserList(this.userName, 1, this.limit);
          this.$message({message: resp.message, type: 'success'});
        })
      }).catch( () => {
        this.$message({type: 'info',message: '已取消删除'})
      })
    },
    // 下拉框显示部门
    getDeptList(){
      dept.getDeptList().then(resp => {
        this.deptList = resp.data
      })
    },
    // 对话框关闭的回调
    DialogClose(done){
      this.user = {}
      done();
    },
  }
}
</script>

<style scoped lang="scss">

</style>
